<%--
  Created by IntelliJ IDEA.
  User: Admin
  Date: 2/11 0011
  Time: 18:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Easyui数据表格</title>
    <script type="text/javascript" src="js/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.3.1/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.3.1/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.3.1/demo/demo.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script type="text/javascript" src="js/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
</head>
<body>
<div id="lay" class="easyui-layout" style="width: 100%;height: 100%" >
    <div region="north" title="用户查询" collapsed=true style="height:100px;" >
        <form id="mysearch" method="post">
            用户名:&nbsp;&nbsp;<input name="name" class="easyui-validatebox"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            开始时间:<input name="startTime"  class="easyui-datetimebox" editable="false" style="width:160px;"  value="" />
            结束时间:<input name="endTime"  class="easyui-datetimebox" editable="false" style="width:160px;"  value="" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a id="searchbtn" class="easyui-linkbutton">查询</a>
            <a id="clearbtn" class="easyui-linkbutton">清空</a>
        </form>
    </div>
    <div region="center">
        <table id="t_user"></table>
    </div>
</div>
<div id="mydialog" class="easyui-dialog" title="添加用户" modal=true draggable=false closed=true
     style="width:300px">
    <form id="myform" action="" method="post">
        <input type="hidden" name="id" value=""/>
        <table>
            <tr>
                <td>用户名:</td>
                <td>
                    <input type="text" name="name" id="name" validType="midLength[2,5]" value=""/>
                </td>
            </tr>
            <tr>
                <td>密码:</td>
                <td>
                    <input type="text" class="easyui-validatebox"
                           required=true validType="equalLength[4]"
                           missingMessage="密码必填!" name="password"/>
                </td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    男<input type="radio" checked="checked" name="sex" value="1"/>
                    女<input type="radio" name="sex" value="2"/>
                </td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input id="age" type="text" name="age" value=""/></td>
            </tr>
            <tr>
                <td>出生日期:</td>
                <td><input id="birthday" style="width:160px;" type="text" name="birthday" value=""/></td>
            </tr>
            <tr>
                <td>所属城市:</td>
                <td>
                    <input name="city" class="easyui-combobox" url="userServlet?method=getCity"
                           valueField="id" textField="name" value=""/>
                </td>
            </tr>
            <tr>
                <td>薪水:</td>
                <td><input id="salary" type="text" name="salary" value=""/></td>
            </tr>
            <tr>
                <td>开始时间:</td>
                <td><input id="startTime" style="width:160px;" type="text" name="startTime" value=""/></td>
            </tr>
            <tr>
                <td>结束时间:</td>
                <td><input id="endTime" style="width:160px;" type="text" name="endTime" value=""/></td>
            </tr>
            <tr>
                <td>个人描述:</td>
                <td><input type="text" name="description" class="easyui-validatebox" required=true
                           validType="midLength[5,50]" missingMessage="个人描述必填!" invalidMessage="描述必须在5到50个字符之间!"
                           value=""/></td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <a id="btn1" class="easyui-linkbutton">保存</a>
                    <a id="btn2" class="easyui-linkbutton">关闭</a>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
<script type="text/javascript">
    $(function () {

        /**
         * 初始化数据表格
         */
        var flag;
        $("#t_user").datagrid({
            idField: 'id',
            title: '用户列表',
            fit:true ,
            width: 1000,
            height: 300,
            url: 'userServlet?method=getList',
            fitColumns: true,
            striped: true,//隔行变色
            rownumbers: true,
            // singleSelect:true,
            rowStyler: function (index, record) {
                if (record.age > 20) {
                    return "background:red";
                }
                // console.info(index);
                // console.info(record);
            },
            frozenColumns: [[				//冻结列特性 ,不要与fitColumns 特性一起使用
                {
                    field: 'ck',
                    width: 50,
                    checkbox: true          //True 就显示 checkbox。
                }
            ]],
            columns: [[
                {field: 'name', title: '用户名', width: 100, align: 'center'},
                {field: 'password', title: '密码', width: 100, align: 'center'},
                {field: 'sex', title: '性别', width: 100, align: 'center'},
                {field: 'age', title: '年龄', width: 100, align: 'center'},
                {field: 'birthday', title: '生日', width: 100, align: 'center'},
                {field: 'salary', title: '薪水', width: 100, align: 'center'},
                {field: 'city', title: '所属城市', width: 100, align: 'center'},
                {field: 'startTime', title: '开始时间', width: 200, align: 'center'},
                {field: 'endTime', title: '结束时间', width: 200, align: 'center'},
                {field: 'description', title: '个人描述', width: 300, align: 'center'}
            ]],

            pagination: true,
            pageSize: 5,
            pageList: [5, 10, 15, 20, 50],
            toolbar: [
                {
                    text: '添加用户',
                    iconCls: 'icon-add',
                    handler: function () {
                        flag = 'add';
                        $("#mydialog").dialog({
                            title: '添加用户'
                        });
                        //$('#myform').find('input[name!=sex]').val("");
                        $('#myform').get(0).reset();            //当点击添加用户的时候,清空原有的数据
                        //$('#myform').form('clear');
                        $('#mydialog').dialog('open');
                    }
                }, {
                    text: '修改用户',
                    iconCls: 'icon-edit',
                    handler: function () {
                        flag = 'edit';
                        var arr = $("#t_user").datagrid("getSelections");//获得所选中的选项行
                        if (arr.length != 1) {
                            $.messager.show({
                                title: '提示信息',
                                msg: '请选择要修改的用户!'
                            });
                        } else {
                            $("#mydialog").dialog({
                                title: '修改用户'
                            });
                            $("#mydialog").dialog("open");//打开窗口
                            $("#myform").get(0).reset();//清空表单数据
                            $("#myform").form('load', {
                                id: arr[0].id,
                                name: arr[0].name,
                                password: arr[0].password,
                                sex: arr[0].sex,
                                age: arr[0].age,
                                birthday: arr[0].birthday,
                                city: arr[0].city,
                                salary: arr[0].salary,
                                startTime: arr[0].startTime,
                                endTime: arr[0].endTime,
                                description: arr[0].description
                            });
                        }
                    }
                }, {
                    text: '删除用户',
                    iconCls: 'icon-remove',
                    handler: function () {
                        var arr = $('#t_user').datagrid('getSelections');
                        if (arr.length <= 0) {
                            $.messager.show({
                                title: '提示信息',
                                msg: '请选择要删除的用户!'
                            });
                        } else {
                            $.messager.confirm('提示信息', '确认删除?', function (r) {
                                if (r) {
                                    var ids = "";
                                    for (var i = 0; i < arr.length; i++) {
                                        ids += arr[i].id + ',';//拼接字符串(1,2,3,4,5,6........)
                                    }
                                    ids = ids.substring(0, ids.length - 1);
                                    alert(ids);

//                                $.post('UserServlet?method=delete' , {ids:ids} , function(result){
//                                    //1 刷新数据表格
//                                    $('#t_user').datagrid('reload');
//                                    //2 清空idField
//                                    $('#t_user').datagrid('unselectAll');
//                                    //3 给提示信息
//                                    $.messager.show({
//                                        title:'提示信息!' ,
//                                        msg:'操作成功!'
//                                    });
//                                });


                                    $.ajax({
                                        type: 'post',
                                        url: 'userServlet?method=delete',
                                        data: {ids: ids},
                                        success: function () {
                                            //1 刷新数据表格
                                            $('#t_user').datagrid('reload');
                                            //2 清空idField;否则在进行修改的时候会出现问题
                                            $('#t_user').datagrid('unselectAll');
                                            //3 给提示信息
                                            $.messager.show({
                                                title: '提示信息',
                                                msg: '操作成功!'
                                            });
                                        }
                                    });
                                } else {
                                    return;
                                }
                            });
                        }
                    }
                }, {
                    text: '查询用户',
                    iconCls: 'icon-search',
                    handler: function () {
                        $('#lay').layout('expand' , 'north');
                    }
                }
            ]
        });

        /**
         * 对  form  表单进行验证
         */

        //自定校验器:
        $.extend($.fn.validatebox.defaults.rules, {
            //自定义名称,要与在validType="midLength[2,5]" 中定义的一致;
            //validType : 为自定义验证规则;
            midLength: {
                validator: function (value, param) {
                    return value.length >= param[0] && value.length <= param[1];
                },
                message: '用户名必须为2到10个字符之间.'
            },
            equalLength: {
                validator: function (value, param) {
                    return value.length >= param[0];
                },
                message: '密码至少为4位.'
            }
        });

        $("#name").validatebox({
            required: true,
            missingMessage: "用户名必填!"
        })

        //数值验证组件
        $("#age").numberbox({
            required: true,
            min: 0,
            max: 150,
            precision: 0,
            missingMessage: '年龄必填',
            sortable : true   //排序
        });
        //日期验证组件
        $("#birthday").datebox({
            required: true,
            closeText: '关闭',
            editable: false,
            missingMessage: '日期必填',
            sortable : true
        });
        //数值验证组件
        $("#salary").numberbox({
            min: 1000,
            max: 20000,
            required: true,
            missingMessage: '薪水必填!',
            precision: 2
        });
        //日期时间组件
        $('#startTime,#endTime').datetimebox({
            required: true,
            missingMessage: '时间必填!',
            editable: false
        });


        /**
         * 提交表单的方法
         */

        $("#btn1").click(function () {
            if ($("#myform").form("validate")) {
                $.ajax({
                    type: 'post',
                    url: flag == 'add' ? 'userServlet?method=save' : 'userServlet?method=update',
                    cache: false,
                    data: $("#myform").serialize(),//想后台发送的数据
                    dataType: "json",               //服务器返回数据时接受的数据类型

                    success: function (data) {
                        //1 关闭窗口
                        $('#mydialog').dialog('close');
                        //2刷新datagrid
                        $('#t_user').datagrid('reload');
                        //3 提示信息
                        var data = $.parseJSON(data);
                        $.messager.show({
                            title: data.status,
                            msg: data.message
                        })
                    },
                    error: function (data) {
                        $.messager.show({
                            title: data.status,
                            msg: data.message
                        });
                    }
                });
            } else {
                $.messager.show({
                    title: '提示信息!',
                    msg: '数据验证不通过,不能保存!'
                });
            }
        });
        /**
         * 关闭窗口的方法
         */
        $('#btn2').click(function () {
            $('#mydialog').dialog('close');
        });
        $('#searchbtn').click(function(){
            $('#t_user').datagrid('load' ,serializeForm($('#mysearch')));
        });
        $('#clearbtn').click(function(){
            $('#mysearch').form('clear');
            $('#t_user').datagrid('load' ,{});
        });

    });

    //js方法：序列化表单
    function serializeForm(form){
        var obj = {};
        $.each(form.serializeArray(),function(index){
            if(obj[this['name']]){
                obj[this['name']] = obj[this['name']] + ','+this['value'];
            } else {
                obj[this['name']] =this['value'];
            }
        });
        return obj;
    }
</script>
</html>
